<template>
    <div role="tabpanel" class="tab-pane full-window"
         :class="{active:show}"
         :transition="transition"
    >
        <iframe v-if="url!==null" style="width:100%;height:100%" src="{{url}}" frameborder="0"></iframe>

        <slot v-else>{{header}}</slot>
        <div id="content-{{index}}" v-if="content!==null"></div>
    </div>
</template>

<script>

    export default {
        props: {
            header: {
                type: String,
                default: ''
            },
            content: {
                type: String,
                default: null
            },
            disabled: {
                type: Boolean,
                default: false
            },
            url: {
                type: String,
                default: null
            }
        },
        data() {
            return {
                index: 0,
                show: false
            }
        },
        computed: {
            show() {
                return (this.$parent.active == this.index);
            },
            transition() {
                return this.$parent.effect
            }
        },
        created() {
            var p = new Promise(function (resolve, reject) {
            });
            p.then(this.$parent.renderData.push({
                        header: this.header,
                        disabled: this.disabled
                    })
            ).then(
                    this.index = this.$parent.renderData.length - 1
            ).then(this.$parent.active = this.index
            )


        },
        beforeDestroy(){
            this.$parent.renderData.splice(this.index, 1)
        },
        ready(){
            if(this.content!==null){
                document.getElementById("content-" + this.index).innerHTML=this.content;
            }

        }
    }
</script>
